<template>
	<!-- 自定义导航栏 -->
	<u-navbar :title="pageTitle" :is-fixed="true" :is-back="false" :border-bottom="false" title-size="28" title-color="#333"></u-navbar>

	<view class="home-container">
		<!-- 用户信息展示区 -->
		<view @click="toUserInfo" class="userInfo-box">
			<image src="@/static/home/default-avatar.png" class="avatar"></image>
			<view class="detail-box">
				<view class="userName">{{ userStore.userInfo.userName }}</view>
				<view class="phone">手机号：{{ userStore.userInfo.tel }}</view>
			</view>
		</view>

		<!-- 日期筛选区域 -->
		<view class="date-filter-box">
			<view class="left">
				<view @click="switchDate('doday')" :class="{ 'filter-item': true, 'active-item': currentDateType == 'doday' }">今日</view>
				<view @click="switchDate('yesterday')" :class="{ 'filter-item': true, 'active-item': currentDateType == 'yesterday' }">昨日</view>
				<view @click="switchDate('custom')" :class="{ 'filter-item': true, 'active-item': currentDateType == 'custom' }">自定义</view>
			</view>
			<view class="right">
				<view @click="switchDate('custom')" class="filter-item">
					<image src="@/static/home/calendar.png" class="calendar"></image>
					<text class="date">{{ currentDate.startDate + '-' + currentDate.endDate }}</text>
				</view>
			</view>
		</view>

		<!-- 用户数据面版区 -->
		<view class="data-box-container">
			<!-- 日期筛选 -->

			<!-- 业务员/业务经理 -->
			<view v-if="userStore.userInfo.userRole == '0'" class="data-box">
				<view class="data-item">
					<view class="data-title">全部商户</view>
					<view class="data-num">{{ commonDataObj.siteCount }}</view>
					<view class="data-change">
						<text>较昨日&nbsp;</text>
						<text class="change-num">+{{ commonDataObj.siteCountComp }}</text>
					</view>
				</view>
				<view class="data-item">
					<view class="data-title">新增商户</view>
					<view class="data-num">{{ commonDataObj.siteNewCount }}</view>
					<view class="data-change">
						<text>较昨日&nbsp;</text>
						<text class="change-num">+{{ commonDataObj.siteNewCountComp }}</text>
					</view>
				</view>
			</view>

			<!-- 巡检员/管理员 -->
			<view v-if="userStore.userInfo.userRole == '3'">
				<view class="data-box">
					<view class="data-item">
						<view class="data-title">累计总收益</view>
						<view class="data-num">{{ commonDataObj.incomeFee }}</view>
						<view class="data-change">
							<text>较昨日&nbsp;</text>
							<text class="change-num">+{{ commonDataObj.incomeFeeComp }}</text>
						</view>
					</view>
					<view class="data-item">
						<view class="data-title">全部流水</view>
						<view class="data-num">{{ commonDataObj.feeCount }}</view>
						<view class="data-change">
							<text>较昨日&nbsp;</text>
							<text class="change-num">+{{ commonDataObj.feeCountComp }}</text>
						</view>
					</view>
					<view class="data-item">
						<view class="data-title">全部订单</view>
						<view class="data-num">{{ commonDataObj.orderCount }}</view>
						<view class="data-change">
							<text>较昨日&nbsp;</text>
							<text class="change-num">+{{ commonDataObj.orderCountComp }}</text>
						</view>
					</view>
				</view>
				<view class="data-box">
					<view class="data-item">
						<view class="data-title">安装设备</view>
						<view class="data-num">{{ commonDataObj.deviceSetCount }}</view>
						<view class="data-change">
							<text>较昨日&nbsp;</text>
							<text class="change-num">+{{ commonDataObj.deviceSetCountComp }}</text>
						</view>
					</view>
					<view class="data-item">
						<view class="data-title">新增商户</view>
						<view class="data-num">{{ commonDataObj.siteNewCount }}</view>
						<view class="data-change">
							<text>较昨日&nbsp;</text>
							<text class="change-num">+{{ commonDataObj.siteNewCountComp }}</text>
						</view>
					</view>
					<view class="data-item">
						<view class="data-title">全部设备</view>
						<view class="data-num">{{ commonDataObj.deviceCount }}</view>
						<view class="data-change">
							<text>较昨日&nbsp;</text>
							<text class="change-num">+{{ commonDataObj.deviceCountComp }}</text>
						</view>
					</view>
				</view>
				<view class="data-box">
					<view class="data-item">
						<view class="data-title">全部商户</view>
						<view class="data-num">{{ commonDataObj.siteCount }}</view>
						<view class="data-change">
							<text>较昨日&nbsp;</text>
							<text class="change-num">+{{ commonDataObj.siteCountComp }}</text>
						</view>
					</view>
					<view class="data-item">
						<view class="data-title">有设备商户</view>
						<view class="data-num">{{ commonDataObj.hasDeviceCount }}</view>
						<view class="data-change">
							<text>较昨日&nbsp;</text>
							<text class="change-num">+{{ commonDataObj.hasDeviceCountComp }}</text>
						</view>
					</view>
					<view class="data-item">
						<view class="data-title">无设备商户</view>
						<view class="data-num">{{ commonDataObj.noDeviceCount }}</view>
						<view class="data-change">
							<text>较昨日&nbsp;</text>
							<text class="change-num">+{{ commonDataObj.noDeviceCountComp }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 用户功能菜单区域 -->
		<view class="menu-box">
			<view v-if="false" @click="toAuditStore" class="menu-item">
				<image src="@/static/home/audit-cion.png" class="menu-icon"></image>
				<view class="menu-text">审核商户</view>
				<image src="@/static/go-icon.png" class="go-icon"></image>
			</view>
			<view v-if="userStore.userInfo.userRole == '0'" @click="toAddStore" class="menu-item">
				<image src="@/static/home/add-cion.png" class="menu-icon"></image>
				<view class="menu-text">新增商户</view>
				<image src="@/static/go-icon.png" class="go-icon"></image>
			</view>
			<view v-if="userStore.userInfo.userRole == '0'" @click="toScanService" class="menu-item">
				<image src="@/static/home/scan-cion.png" class="menu-icon"></image>
				<view class="menu-text">扫码运维</view>
				<image src="@/static/go-icon.png" class="go-icon"></image>
			</view>
			<view v-if="userStore.userInfo.userRole == '0' || userStore.userInfo.userRole == '3'" @click="toMyStore" class="menu-item">
				<image src="@/static/home/store-cion.png" class="menu-icon"></image>
				<view class="menu-text">我的商户</view>
				<image src="@/static/go-icon.png" class="go-icon"></image>
			</view>
			<view v-if="userStore.userInfo.userRole == '3'" @click="toDeviceAllocation" class="menu-item">
				<image src="@/static/home/allocate-cion.png" class="menu-icon"></image>
				<view class="menu-text">设备下拨</view>
				<image src="@/static/go-icon.png" class="go-icon"></image>
			</view>
			<view v-if="userStore.userInfo.userRole == '3'" @click="toMyDevice" class="menu-item">
				<image src="@/static/home/device-cion.png" class="menu-icon"></image>
				<view class="menu-text">我的设备</view>
				<image src="@/static/go-icon.png" class="go-icon"></image>
			</view>
			<view v-if="userStore.userInfo.userRole == '3'" @click="toMyStaff" class="menu-item">
				<image src="@/static/home/person-cion.png" class="menu-icon"></image>
				<view class="menu-text">我的员工</view>
				<image src="@/static/go-icon.png" class="go-icon"></image>
			</view>
			<view v-if="userStore.userInfo.userRole == '3'" @click="toStaffData" class="menu-item">
				<image src="@/static/home/person-cion.png" class="menu-icon"></image>
				<view class="menu-text">员工数据</view>
				<image src="@/static/go-icon.png" class="go-icon"></image>
			</view>
			<view v-if="userStore.userInfo.userRole == '3'" @click="toStorIncome" class="menu-item">
				<image src="@/static/home/income-cion.png" class="menu-icon"></image>
				<view class="menu-text">商户收益</view>
				<image src="@/static/go-icon.png" class="go-icon"></image>
			</view>
		</view>
	</view>

	<!-- 自定义时间选择日历 -->
	<u-calendar
		v-model="customDateShow"
		@change="dateChange"
		mode="range"
		:max-date="maxDate"
		border-radius="48"
		:btnCustomStyle="{ background: '#00C582' }"
		active-bg-color="#00C582"
		range-bg-color="rgba(0, 197, 130, .1)"
		range-color="#00C582"
		:safe-area-inset-bottom="true"
	></u-calendar>
</template>

<script setup>
import { ref } from 'vue';
import { useUserStore } from '@/store/userStore';
import { onLoad } from '@dcloudio/uni-app';
import { getAdminHomeData, getSalesmanHomeData } from '@/api/home.js';

// 实例化用户store
const userStore = useUserStore();

onLoad(() => {
	switchPageTitle();
	initHomeData();
});

// 页面数据面板初始化 0：业务员 1：巡检员 2：业务经理 3：管理员
const initHomeData = () => {
	switch (userStore.userInfo.userRole){
		case 0:
			getSalesmanHomeDataFun();
			break;
		case 1:
			break;
		case 2:
			break;
		case 3:
			getAdminHomeDataFun();
			break;
		default:
			break;
	}
};

// 页面通用数据面板数据容器
const commonDataObj = ref({});

// 切换页面标题
const pageTitle = ref('');
const switchPageTitle = () => {
	switch (userStore.userInfo.userRole) {
		case 0:
			pageTitle.value = '业务员';
			break;
		case 1:
			pageTitle.value = '巡检员';
			break;
		case 2:
			pageTitle.value = '业务经理';
			break;
		case 3:
			pageTitle.value = '管理员';
			break;
		default:
			break;
	}
};

// 切换时间选择
const currentDateType = ref('doday');
const currentDate = ref({
	startDate: '',
	endDate: ''
});
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const switchDate = (type) => {
	currentDateType.value = type;
	switch (type) {
		case 'doday':
			currentDate.value.startDate = '';
			currentDate.value.endDate = '';
			chooseToday();
			initHomeData();
			break;
		case 'yesterday':
			currentDate.value.startDate = '';
			currentDate.value.endDate = '';
			chooseYesterday();
			initHomeData();
			break;
		case 'custom':
			chooseCustom();
			break;
		default:
			break;
	}
};

// 选择今日
const chooseToday = () => {
	currentDate.value.startDate = year + '/' + month + '/' + day;
	currentDate.value.endDate = year + '/' + month + '/' + day;
};
chooseToday();

// 选择昨日
const chooseYesterday = () => {
	currentDate.value.startDate = year + '/' + month + '/' + (day - 1);
	currentDate.value.endDate = year + '/' + month + '/' + (day - 1);
};

// 选择自定义
const customDateShow = ref(false);
const maxDate = ref('');
maxDate.value = year + '-' + month + '-' + day;
const chooseCustom = () => {
	customDateShow.value = true;
};

// 自定义选择日期
const dateChange = (e) => {
	console.log(e);
	currentDate.value.startDate = e.startDate;
	currentDate.value.endDate = e.endDate;
	initHomeData();
};

// 获取管理员首页数据面板数据
const currentDateTypeMap = {
	doday: '1',
	yesterday: '2',
	custom: '3',
};
const getAdminHomeDataFun = async () => {
	let res = await getAdminHomeData({
		type: currentDateTypeMap[currentDateType.value],
		beginDate: currentDate.value.startDate,
		endDate: currentDate.value.endDate,
	})
	
	if (res.code == 200) {
		commonDataObj.value = res.data;
	}
};

// 获取业务员首页数据面板数据
const getSalesmanHomeDataFun = async () => {
	let res = await getSalesmanHomeData({
		type: currentDateTypeMap[currentDateType.value],
		beginDate: currentDate.value.startDate,
		endDate: currentDate.value.endDate,
	})
	
	if (res.code == 200) {
		commonDataObj.value = res.data;
	}
}

// 跳转到用户信息页
const toUserInfo = () => {
	uni.navigateTo({
		url: '/subPages/userInfo/index'
	});
};

// 跳转到审核商户页
const toAuditStore = () => {
	uni.navigateTo({
		url: '/subPages/auditStore/index'
	});
};

// 跳转到新增商户页
const toAddStore = () => {
	uni.navigateTo({
		url: '/subPages/addStore/index'
	});
};

// 跳转到扫码运维页
const toScanService = () => {
	uni.navigateTo({
		url: '/subPages/scanService/index'
	});
};

// 跳转到我的商户页
const toMyStore = () => {
	uni.navigateTo({
		url: '/subPages/myStore/index'
	});
};

// 跳转到设备下拨页
const toDeviceAllocation = () => {
	uni.navigateTo({
		url: '/subPages/deviceAllocation/index'
	});
};

// 跳转到我的设备页
const toMyDevice = () => {
	uni.navigateTo({
		url: '/subPages/myDeviceList/index'
	});
};

// 跳转到我的员工页
const toMyStaff = () => {
	uni.navigateTo({
		url: '/subPages/myStaff/index'
	});
};

// 跳转到员工数据页
const toStaffData = () => {
	uni.navigateTo({
		url: '/subPages/staffData/index'
	});
};

// 跳转到商户收益页
const toStorIncome = () => {
	uni.navigateTo({
		url: '/subPages/storIncome/index'
	});
};
</script>

<style lang="scss" scoped>
.home-container {
	min-height: 100vh;
	background-image: url('~@/static/home/home-bg.png');
	background-size: 100% 212rpx;
	background-repeat: no-repeat;
	background-color: #f9f9f9;
	padding-bottom: 24rpx;

	.userInfo-box {
		display: flex;
		flex-wrap: nowrap;
		height: 212rpx;
		padding: 48rpx 40rpx;

		.avatar {
			width: 124rpx;
			height: 124rpx;
			border-radius: 50%;
			margin-right: 24rpx;
		}

		.detail-box {
			padding-top: 14rpx;

			.userName {
				font-size: 32rpx;
				line-height: 44rpx;
				font-weight: 500;
				margin-bottom: 12rpx;
			}

			.phone {
				color: #999;
				font-size: 24rpx;
				line-height: 34rpx;
			}
		}
	}

	.date-filter-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		margin-bottom: 24rpx;

		.left,
		.right {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			gap: 20rpx;

			.filter-item {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				line-height: 40rpx;
				padding: 12rpx;
				white-space: nowrap;
				border-radius: 12rpx;
				border: 2rpx solid #e0e0e0;
			}

			.active-item {
				color: #fff;
				background-color: $uni-main-color;
				border: 2rpx solid $uni-main-color;
			}
		}

		.right {
			.filter-item {
				color: #999;
				font-size: 24rpx;
				min-width: 356rpx;

				.calendar {
					width: 40rpx;
					height: 40rpx;
					margin-right: 12rpx;
				}
			}
		}
	}

	.data-box-container {
		padding: 0 24rpx 24rpx;
		background: linear-gradient(180deg, #fefefe, #f9f9f9);

		.data-box {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			padding: 32rpx 24rpx 24rpx;
			border-radius: 24rpx;
			background: linear-gradient(180deg, #eefcf3, #f6fdf8);
			margin-bottom: 24rpx;

			.data-item {
				position: relative;
				flex: 1;
				padding-left: 20rpx;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 24rpx;
					display: inline-block;
					width: 2rpx;
					height: 48rpx;
					border-radius: 6rpx;
					background: #3ed9793d;
				}

				&:first-child {
					padding-left: 0rpx;

					&::before {
						display: none;
					}
				}

				.data-title {
					position: relative;
					color: #999;
					font-size: 24rpx;
					line-height: 32rpx;
					margin-bottom: 16rpx;
					padding-left: 10rpx;

					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						display: inline-block;
						width: 4rpx;
						height: 16rpx;
						border-radius: 20rpx;
						background-color: $uni-main-color;
					}
				}

				.data-num {
					font-size: 32rpx;
					line-height: 40rpx;
					font-weight: 600;
					margin-bottom: 12rpx;
					padding-left: 10rpx;
				}

				.data-change {
					color: #999;
					font-size: 18rpx;
					line-height: 32rpx;
					padding-left: 10rpx;

					.change-num {
						color: $uni-main-color;
					}
				}
			}
		}
	}

	.menu-box {
		padding: 0 24rpx;

		.menu-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 128rpx;
			border-radius: 24rpx;
			background-color: #fff;
			margin-bottom: 24rpx;
			padding: 16rpx 24rpx 12rpx 12rpx;

			.menu-icon {
				width: 90rpx;
				height: 100rpx;
			}

			.menu-text {
				flex: 1;
			}

			.go-icon {
				width: 10rpx;
				height: 16rpx;
			}
		}
	}
}

:deep(.u-calendar__bottom__btn) {
	.u-btn--primary--disabled {
		border-color: rgba(0, 197, 130, 0.5) !important;
		background-color: rgba(0, 197, 130, 0.5) !important;
	}
}
</style>
